irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/pages/blog/[id].js
328 lines28 KBJavaScript
RawDownloadHistory
1import Layout from "@/components/layout/Layout"
2import Link from "next/link"
3import { useRouter } from "next/router"
4import { useEffect, useState } from "react"
5import data from "../../util/blog.json"
6
7export default function BlogDetails() {
8 let Router = useRouter()
9 const [blogPost, setBlogPost] = useState(null)
10 const { id } = Router.query
11
12 useEffect(() => {
13 setBlogPost(data.find((data) => data.id == id))
14 }, [id])
15
16 return (
17 <>
18 <Layout breadcrumbTitle="Blog Details">
19 {blogPost && (
20 <>
21
22 <section className="blog-details-area pt-120 pb-120">
23 <div className="container">
24 <div className="row justify-content-center">
25 <div className="col-xl-8">
26 <div className="blog-details-wrap">
27 <div className="blog-details-thumb">
28 <img src={`/assets/img/blog/${blogPost.img}`} alt="" className="w-100" />
29 </div>
30 <div className="blog-details-content">
31 <div className="blog-meta">
32 <ul className="list-wrap">
33 <li><i className="far fa-user" /> By <Link href="/blog-details">Admin</Link></li>
34 <li><i className="fas fa-calendar-alt" />23 Dec {new Date().getFullYear()}</li>
35 <li><i className="far fa-comments" />05</li>
36 <li><i className="far fa-eye" />1,526 VIEWS</li>
37 </ul>
38 </div>
39 <h2 className="title">{blogPost.title}</h2>
40 <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at it as layout. The point of using Lorem Ipsum is that it has a more normal distribution.Collaboratively pontificat bleed aedge resources with inexpensive methodologies globally initiate multidisciplinary compatible architectures as our aspiteously repurpose leading edge growth strategies</p>
41 <blockquote>
42 <p>Which Podcasts Should Web Designer And Developers Be Listening To Ultimate Digital Clean our
43 Checklist Prepare eadable when content of a page when looking at its layout.</p>
44 <cite>David H. Molina</cite>
45 </blockquote>
46 <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at it as layout. The point of using Lorem Ipsum is that it has a more normal distribution.</p>
47 <div className="bd-inner-img-wrap">
48 <div className="row">
49 <div className="col-md-6">
50 <img src="/assets/img/blog/blog_details02.jpg" alt="" />
51 </div>
52 <div className="col-md-6">
53 <div className="bd-inner-content">
54 <p>The point of using Lorm Ipsum is that it has a our more normal our distribution Collaboratively pontificat bleed edge as resources with inexpensive thje methodologie
55 sglobally initiate multidisciplinary.</p>
56 <ul className="list-wrap">
57 <li><i className="fas fa-check-circle" />Information Tecaccumulation of technologies</li>
58 <li><i className="fas fa-check-circle" />Autonomous house with its garden and office</li>
59 <li><i className="fas fa-check-circle" />Self-expression through decor and art</li>
60 <li><i className="fas fa-check-circle" />Regular update monitoring</li>
61 <li><i className="fas fa-check-circle" />Functional minimalism</li>
62 <li><i className="fas fa-check-circle" />Regular update monitoring</li>
63 </ul>
64 </div>
65 </div>
66 </div>
67 </div>
68 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in a our some form, by injected humour, or randomised words which don't look even slightly believable. If you are going our as to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle the of text. All the Lorem Ipsum generators on the Internet tend.</p>
69 <div className="blog-details-bottom">
70 <div className="row align-items-center">
71 <div className="col-lg-8">
72 <div className="post-tags">
73 <h5 className="title">Tag:</h5>
74 <ul className="list-wrap">
75 <li><Link href="#">#Construction</Link></li>
76 <li><Link href="#">#Roofing Service</Link></li>
77 <li><Link href="#">#Roofing</Link></li>
78 </ul>
79 </div>
80 </div>
81 <div className="col-lg-4">
82 <div className="blog-post-share">
83 <h5 className="title">Share:</h5>
84 <ul className="list-wrap">
85 <li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
86 <li><Link href="#"><i className="fab fa-twitter" /></Link></li>
87 <li><Link href="#"><i className="fab fa-linkedin-in" /></Link></li>
88 <li><Link href="#"><i className="fab fa-instagram" /></Link></li>
89 </ul>
90 </div>
91 </div>
92 </div>
93 </div>
94 </div>
95 <div className="pev-next-post-wrap">
96 <div className="row">
97 <div className="col-md-6">
98 <div className="post-item">
99 <div className="post-inner">
100 <div className="thumb">
101 <Link href="/blog-details"><img src="/assets/img/blog/pb_post_img01.jpg" alt="" /></Link>
102 </div>
103 <div className="content">
104 <h2 className="title"><Link href="/blog-details">Portrait smiling professional engineer laptop</Link></h2>
105 <span><i className="far fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
106 </div>
107 </div>
108 <div className="post-btn">
109 <Link href="/blog-details"><i className="fas fa-arrow-left" />Prev</Link>
110 </div>
111 </div>
112 </div>
113 <div className="col-md-6">
114 <div className="post-item next-post-item">
115 <div className="post-inner">
116 <div className="thumb">
117 <Link href="/blog-details"><img src="/assets/img/blog/pb_post_img02.jpg" alt="" /></Link>
118 </div>
119 <div className="content">
120 <h2 className="title"><Link href="/blog-details">Full shot man with helmet sitting on roof</Link></h2>
121 <span><i className="far fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
122 </div>
123 </div>
124 <div className="post-btn next-btn">
125 <Link href="/blog-details"><i className="fas fa-arrow-right" />next</Link>
126 </div>
127 </div>
128 </div>
129 </div>
130 </div>
131 <div className="comments-wrap">
132 <h4 className="comments-wrap-title">Comments (04)</h4>
133 <div className="latest-comments">
134 <ul className="list-wrap">
135 <li>
136 <div className="comments-box">
137 <div className="comments-avatar">
138 <img src="/assets/img/blog/comment_avatar01.png" alt="" />
139 </div>
140 <div className="comments-text">
141 <div className="avatar-name">
142 <h6 className="name">
143 Abubokkor Siddik
144 <Link href="#" className="comment-reply-link"><i className="fas fa-reply" />Reply</Link>
145 </h6>
146 <span className="date">September 6, {new Date().getFullYear()}</span>
147 </div>
148 <p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus ultrices.</p>
149 </div>
150 </div>
151 <ul className="list-wrap children">
152 <li>
153 <div className="comments-box">
154 <div className="comments-avatar">
155 <img src="/assets/img/blog/comment_avatar02.png" alt="" />
156 </div>
157 <div className="comments-text">
158 <div className="avatar-name">
159 <h6 className="name">
160 Admin
161 <Link href="#" className="comment-reply-link"><i className="fas fa-reply" />Reply</Link>
162 </h6>
163 <span className="date">September 6, {new Date().getFullYear()}</span>
164 </div>
165 <p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus ultrices.</p>
166 </div>
167 </div>
168 </li>
169 </ul>
170 </li>
171 <li>
172 <div className="comments-box">
173 <div className="comments-avatar">
174 <img src="/assets/img/blog/comment_avatar03.png" alt="" />
175 </div>
176 <div className="comments-text">
177 <div className="avatar-name">
178 <h6 className="name">
179 Elliot Alderson
180 <Link href="#" className="comment-reply-link"><i className="fas fa-reply" />Reply</Link>
181 </h6>
182 <span className="date">September 6, {new Date().getFullYear()}</span>
183 </div>
184 <p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus.</p>
185 </div>
186 </div>
187 </li>
188 <li>
189 <div className="comments-box">
190 <div className="comments-avatar">
191 <img src="/assets/img/blog/comment_avatar04.png" alt="" />
192 </div>
193 <div className="comments-text">
194 <div className="avatar-name">
195 <h6 className="name">
196 Enanath Jhon
197 <Link href="#" className="comment-reply-link"><i className="fas fa-reply" />Reply</Link>
198 </h6>
199 <span className="date">September 6, {new Date().getFullYear()}</span>
200 </div>
201 <p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus eget ultrices pretium.</p>
202 </div>
203 </div>
204 </li>
205 </ul>
206 </div>
207 </div>
208 <div className="comment-respond">
209 <h3 className="comment-reply-title">Write Your Comment</h3>
210 <form className="comment-form" action="#">
211 <div className="row">
212 <div className="col-md-4">
213 <div className="form-grp">
214 <input type="text" placeholder="Name *" />
215 </div>
216 </div>
217 <div className="col-md-4">
218 <div className="form-grp">
219 <input type="email" placeholder="Email *" />
220 </div>
221 </div>
222 <div className="col-md-4">
223 <div className="form-grp">
224 <input type="url" placeholder="Website*" />
225 </div>
226 </div>
227 </div>
228 <div className="form-grp">
229 <textarea name="message" placeholder="Comment *" />
230 </div>
231 <button type="submit" className="btn btn-two">Post Comment</button>
232 </form>
233 </div>
234 </div>
235 </div>
236 <div className="col-xl-4 col-lg-6 col-md-10">
237 <aside className="blog-sidebar">
238 <div className="blog-widget">
239 <div className="sidebar-search">
240 <h4 className="widget-title">Search</h4>
241 <form action="#">
242 <input id="search" type="text" placeholder="Search" />
243 <button type="submit"><i className="fas fa-search" /></button>
244 </form>
245 </div>
246 </div>
247 <div className="blog-widget">
248 <h4 className="widget-title">Categories</h4>
249 <div className="categories-list">
250 <ul className="list-wrap">
251 <li><Link href="#">Business Consulting <span>(05)</span></Link></li>
252 <li><Link href="#">Financial Investment <span>(07)</span></Link></li>
253 <li><Link href="#">IT Consultations <span>(03)</span></Link></li>
254 <li><Link href="#">Digital Analytics <span>(04)</span></Link></li>
255 <li><Link href="#">Payment Processing <span>(02)</span></Link></li>
256 <li><Link href="#">Software Solutions <span>(09)</span></Link></li>
257 </ul>
258 </div>
259 </div>
260 <div className="blog-widget">
261 <h4 className="widget-title">Recent News</h4>
262 <div className="rc-post-wrap">
263 <div className="rc-post-item">
264 <div className="rc-post-thumb">
265 <Link href="/blog-details"><img src="/assets/img/blog/rc_post01.jpg" alt="" /></Link>
266 </div>
267 <div className="rc-post-content">
268 <h5 className="title"><Link href="/blog-details">Aerial view of a private house with on roof</Link>
269 </h5>
270 <span><i className="fas fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
271 </div>
272 </div>
273 <div className="rc-post-item">
274 <div className="rc-post-thumb">
275 <Link href="/blog-details"><img src="/assets/img/blog/rc_post02.jpg" alt="" /></Link>
276 </div>
277 <div className="rc-post-content">
278 <h5 className="title"><Link href="/blog-details">Medium shot men working on roof presentation</Link>
279 </h5>
280 <span><i className="fas fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
281 </div>
282 </div>
283 <div className="rc-post-item">
284 <div className="rc-post-thumb">
285 <Link href="/blog-details"><img src="/assets/img/blog/rc_post03.jpg" alt="" /></Link>
286 </div>
287 <div className="rc-post-content">
288 <h5 className="title"><Link href="/blog-details">Free photo cute family a roof above their head</Link>
289 </h5>
290 <span><i className="fas fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
291 </div>
292 </div>
293 </div>
294 </div>
295 <div className="blog-widget">
296 <h4 className="widget-title">Popular Tags</h4>
297 <div className="tag-list-wrap">
298 <ul className="list-wrap">
299 <li><Link href="#">Construction</Link></li>
300 <li><Link href="#">Roofing</Link></li>
301 <li><Link href="#">Repairer</Link></li>
302 <li><Link href="#">Maintenance</Link></li>
303 <li><Link href="#">Remodeling</Link></li>
304 <li><Link href="#">Roof</Link></li>
305 <li><Link href="#">Roofing Service</Link></li>
306 <li><Link href="#">Consulting</Link></li>
307 </ul>
308 </div>
309 </div>
310 <div className="blog-widget widget-bg" data-background="/assets/img/blog/widget_bg.jpg" style={{ backgroundImage: 'url("/assets/img/blog/widget_bg.jpg")' }}>
311 <h4 className="widget-title">Need Help</h4>
312 <div className="sidebar-content">
313 <h4 className="title">Beautiful red brick house with decorative lights</h4>
314 <p>Sit amet consectetur adipiscing elseds do eius mod tempor incididunt</p>
315 <Link href="/contact" className="btn btn-two">Contact Us</Link>
316 </div>
317 </div>
318 </aside>
319 </div>
320 </div>
321 </div>
322 </section>
323 </>
324 )}
325 </Layout>
326 </>
327 )
328}